<template>
  <!-- 导入基本数据 -->
  <a-modal
    :visible="importExeclVisible"
    title="种粮大户补贴分户明细表"
    centered
    :closable="false"
    width="80%"
    dialogClass="member-execl-dialog"
    @cancel="importExeclVisible = false"
  >
    <ImportExeclPreview :execlData="execlData" ref="ImportExeclPreview" />
    <section slot="footer">
      <a-button @click="importExeclVisible = false">取消</a-button>
      <a-button
        type="primary"
        :loading="importExeclConfirmLoading"
        @click="handlerConfirmImport"
        >{{ isPreview ? '待上传文件内容已确认' : '确认导入' }}</a-button
      >
    </section>
  </a-modal>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { ImportExecl } from '@/utils/execl'
import { famerServices, IMember } from '@/common/services/famer'
import ImportExeclPreview from './GrainImportExeclPreview.vue'
import { message, Modal } from 'ant-design-vue'
import { largeMemberServices } from '@/common/services/largeMember'

@Component({
  components: {
    ImportExeclPreview,
  },
})
export default class MemberImportMixin extends Vue {
  @Prop({
    type: Boolean,
  })
  public isPreview!: boolean
  public file!: File
  // 上传execl
  public importExeclVisible = false
  public importExeclConfirmLoading = false
  public execlData: any[] = []
  public handlerUploadExecl() {
    const _self = this
    ImportExecl(
      {
        s_a_id: '种植地行政编码',
        s_a_name: '种植地行政区名', // 行政地区编号
        big_mb_nam: '大户名称', // 大户法定名称
        big_mb_type: '大户性质', // 大户性质
        big_mb_law_id: '法定证件号', // 大户法定编号（农户编号或者组织编号）
        big_mb_user: '负责人姓名', // 负责人姓名
        big_mb_tel: '负责人电话', // 负责人电话
        big_mb_sfz: '负责人身份证号', // 负责人身份证号
        big_mb_addr: '种粮地点', // 种粮地点
        big_mb_bank_user: '银行开户名', // 开户人姓名
        big_mb_bank_id: '银行账号', // 开户账号
        big_mb_bank_code: '开户行名称', // 开户行名称
        field1: '承包地', // 承包确权面积
        field2: '增加面积', // 增加面积
        field3: '减少面积', // 减少面积
        plant1: '水稻', // 水稻
        plant2: '玉米', // 玉米
        plant3: '小麦', // 小麦
        plant4: '红苕', // 红苕
        plant5: '马铃薯', // 马铃薯
        plant6: '大豆', // 大豆
        plant7: '绿豆', // 绿豆
        plant8: '豌葫豆', // 豌葫豆
        plant9: '高粱', // 高粱
        plant10: '荞麦', // 荞麦
        plant11: '肾豆', // 肾豆
        plant12: '红小豆', // 红小豆
      },
      (data, map) => {
        // console.log('data', data)
        // const titles = Object.values(data[1])
        console.log(data)
        return data.slice(2).map((item: any) => {
          const fields = [
            '种植地行政编码',
            '种植地行政区名',
            '大户性质',
            '大户名称',
            '法定证件号',
            '种粮地点',
            '负责人姓名',
            '负责人身份证号',
            '负责人电话',
            '银行开户名',
            '银行账号',
            '开户行名称',
            '确权面积（亩）',
            '承包地',
            '增加面积',
            '减少面积',
            '',
            '水稻',
            '玉米',
            '小麦',
            '红苕',
            '马铃薯',
            '大豆',
            '绿豆',
            '豌葫豆',
            '高粱',
            '荞麦',
            '肾豆',
            '红小豆',
            '补贴申报时间',
            '乡镇核查面积（亩）',
            '区县核定补贴面积（亩）',
            '补贴金额（元）'
          ]
          let fieldMap: Record<string, string> = {}
          fields.forEach((key, index) => {
            if (key) {
              fieldMap[key] = item['__EMPTY' + (index === 0 ? '' : `_${index}`)]
            }
          })
          return fieldMap
          // {
          //   所属行政区: item['__EMPTY'],
          //   大户性质: item['__EMPTY_1'],
          //   大户名称: item['__EMPTY_2'],
          //   法定证件号: item['__EMPTY_3'],
          //   种粮地点: item['__EMPTY_4'],
          //   负责人姓名: item['__EMPTY_5'],
          //   负责人身份证号: item['__EMPTY_6'],
          //   负责人电话: item['__EMPTY_7'],
          //   银行开户名: item['__EMPTY_8'],
          //   银行账号: item['__EMPTY_9'],
          //   开户行名称: item['__EMPTY_10'],
          //   '确权面积（亩）': item['__EMPTY_11'],
          //   '承包地': item['__EMPTY_12'],
          //   '增加面积': item['__EMPTY_13'],
          //   '减少面积': item['__EMPTY_14'],
          //   '水稻': item['__EMPTY_16'],
          //   '玉米': item['__EMPTY_17'],
          //   '小麦': item['__EMPTY_18'],
          //   '红苕': item['__EMPTY_19'],
          //   '马铃薯': item['__EMPTY_20'],
          //   '大豆': item['__EMPTY_21'],
          //   '绿豆': item['__EMPTY_22'],
          //   '豌葫豆': item['__EMPTY_23'],
          //   '高粱': item['__EMPTY_24'],
          //   '荞麦': item['__EMPTY_25'],
          //   '肾豆': item['__EMPTY_26'],
          //   '红小豆': item['__EMPTY_27'],
            
          //   // '粮食种植面积（亩）': item['__EMPTY_15'],
          //   补贴申报时间: item['__EMPTY_28'],
          //   '乡镇核查面积（亩）': item['__EMPTY_29'],
          //   '区县核定补贴面积（亩）': item['__EMPTY_30'],
          //   '补贴金额（元）': item['__EMPTY_31']
          // }
        })
      }
    ).then((_) => {
      this.importExeclVisible = true
      // @ts-ignore
      this.execlData = _.formatedData || []
      // @ts-ignore
      this.file = _.file
    })
  }

  public async handlerConfirmImport() {
    // @ts-ignore
    const data = this.$refs.ImportExeclPreview.execlData
    if (!data.length) {
      message.error('请导入数据')
      return false
    }
    this.importExeclConfirmLoading = true

    // 预览模式下直接返回数据 + 关闭
    if (this.isPreview) {
      this.$emit('previewSuccess', {
        data,
        file: this.file,
      })
      this.importExeclVisible = false
      return
    }

    try {
      // const step = 1000;
      // const count = Math.ceil(data.length / step);
      // for (let i = 0; i < count; i++) {
      //   const temp = data.slice(i * step, (i + 1) * step)
      //   await famerServices.importGrainExecl(temp)
      // }
      const res = await largeMemberServices.batchInsert(data)
      Modal.success({
        content: res.data || '数据导入成功',
        centered: true,
      })
    } finally {
      this.importExeclConfirmLoading = false
      this.importExeclVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.member-container {
  display: flex;
  .area-tree {
    width: 300px;
    flex: none;
    background-color: #fff;
    border-right: 1px solid #eee;
    margin-right: 10px;
  }
}
.house-holder /deep/ .ant-card-body {
  max-height: 600px;
  height: auto;
}
.member-list {
  display: flex;
  flex-direction: column;
}
</style>
